<template>
    <div class="workmate-container">
        <header class="header">
            <h1>工作伙伴</h1>
            <p class="subtitle">朝九晚五, 打卡不误, 工作使我快乐, 努力让我充实 </p>
        </header>
        <main class="main-content">
            <el-card>
                <section class="welcome-section" v-if="isCheckin">
                    <h2>上班打卡</h2>
                    <p v-if="rightTime">请点击按钮进行打卡操作</p>
                    <p v-else>您已经上班迟到</p>
                    <button @click="handleCheckin" ref="checkInButton" :disabled="attendanceStore.checkInSuccess">{{
                        attendanceStore.checkInSuccess ? '打卡成功' : '打卡' }}</button>
                </section>
                <section class="welcome-section" v-else>
                    <h2>下班打卡</h2>
                    <p v-if="rightTime">请点击按钮进行打卡操作</p>
                    <p v-else>未到打卡时间</p>
                    <button @click="handleCheckout" ref="checkOutButton" :disabled="attendanceStore.checkOutSuccess">{{
                        attendanceStore.checkOutSuccess ? '打卡成功' : '打卡' }}</button>
                </section>
            </el-card>
            <el-card>
                <section class="welcome-section">
                    <h2>请假申请</h2>
                    <p>请点击按钮进行请假操作</p>
                    <button @click="openDialog('add')">请假</button>
                </section>
            </el-card>
        </main>
        <AddLeaveForm :AddLeaveDialogVisible="AddLeaveDialogVisible" @closeDialog="closeDialog('add')">
        </AddLeaveForm>
    </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue';
import AddLeaveForm from './component/AddLeaveForm.vue';

import useAccountStore from '../../store/account';
const accountStore = useAccountStore();
import useAtendanceStore from "../../store/attendance";
const attendanceStore = useAtendanceStore();

import { updateData } from "../../api/api";
let isCheckin = ref(true);
let rightTime = ref(false);
onMounted(() => {
    //初始化打卡状态
    attendanceStore.init();
    accountStore.getUserMsgFromLocalStorage();
    //判断当前时间是上午还是下午
    const now = new Date();
    const hour = now.getHours();
    isCheckin.value = hour < 12;
    nextTick(() => {
        judgButtonColor();
    });
});
//根据时间判断打卡按钮颜色
let checkInButton = ref(null);
let checkOutButton = ref(null);
//设置打卡成功按钮的样式
const setSuccessButton = (type: string) => {
    if (type == 'checkIn' && attendanceStore.checkInSuccess) {
        checkInButton.value.style.backgroundColor = 'blue ';
        checkInButton.value.style.cursor = 'default ';
        return true
    } else if (type == 'checkOut' && attendanceStore.checkOutSuccess) {
        checkOutButton.value.style.backgroundColor = 'blue ';
        checkOutButton.value.style.cursor = 'default ';
        return true
    } else if (type == '') {
        checkOutButton.value.style.backgroundColor = 'blue ';
        checkOutButton.value.style.cursor = 'default ';
        return true
    } else {
        return false
    }
}
const judgButtonColor = () => {
    const today = new Date();
    const hour = today.getHours();
    const minute = today.getMinutes();


    if (isCheckin.value) {

        if (hour < 9 || (hour === 9 && minute === 0)) {
            rightTime.value = true;
            const flag = setSuccessButton("checkIn");
            if (flag) return
            checkInButton.value.style.backgroundColor = 'green';
        } else {
            rightTime.value = false;
            const flag = setSuccessButton("checkIn");
            if (flag) return
            checkInButton.value.style.backgroundColor = 'red';
        }
    } else {

        if (hour > 17 || (hour === 17 && minute > 0)) {
            rightTime.value = true;
            const flag = setSuccessButton("checkOut");
            if (flag) return
            checkOutButton.value.style.backgroundColor = 'green';
        } else {
            rightTime.value = false;
            const flag = setSuccessButton("checkOut");
            if (flag) return
            checkOutButton.value.style.backgroundColor = 'red';
        }
    }


}
const handleCheckin = async () => {
    const userMsg: any = accountStore.userMsg;
    if (!userMsg) {
        alert('身份验证已过期，请重新登录');
        return;
    }
    const today = new Date();
    const attendance_date = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
    const check_in_time = `${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;
    const data = {
        employee_id: userMsg.employee_id,
        attendance_date: attendance_date,
        check_in_time: check_in_time,
        check_out_time: null,
    }
    const res = await updateData('/attendance', data);
    if (res.code === 200 && res.message === '考勤记录更新成功') {
        //修改打卡按钮样式
        setSuccessButton("")
        attendanceStore.setCheckInSuccess(true);
    }
    console.log('res', res);
};
const handleCheckout = async () => {
    const userMsg: any = accountStore.userMsg;
    if (!userMsg) {
        alert('身份验证已过期，请重新登录');
        return;
    }
    const today = new Date();
    const attendance_date = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
    const check_out_time = `${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;
    const data = {
        employee_id: userMsg.employee_id,
        attendance_date: attendance_date,
        check_in_time: null,
        check_out_time: check_out_time,
    }

    const res = await updateData(`/attendance`, data)
    if (res.code === 200 && res.message === '考勤记录更新成功') {
        //修改打卡按钮样式
        setSuccessButton("")
        attendanceStore.setCheckOutSuccess(true);
    }
    console.log('res', res);
}
let AddLeaveDialogVisible = ref(false);
// 打开弹窗
const openDialog = (type: string) => {
    if (type === 'add') {
        AddLeaveDialogVisible.value = true;
    } else {

    }
};
const closeDialog = (type: string) => {
    if (type === 'add') {
        AddLeaveDialogVisible.value = false;
    } else {
    }
};

</script>

<style scoped lang="scss">
.workmate-container {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #f4f4f4;

    .header {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border-radius: 8px;
    }

    .subtitle {
        font-size: 1.2rem;
        margin-top: 10px;
    }
}



.main-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 40px;

    .el-card {
        width: 45%;
        margin-bottom: 20px;

        .welcome-section {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;

            h2 {
                font-size: 2rem;
                margin-bottom: 10px;
            }

            p {
                font-size: 1rem;
                margin-bottom: 20px;
            }

            button {
                width: 50%;
                background-color: #3498db;
                color: white;
                padding: 10px 20px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 1.5rem;
                transition: background-color 0.3s;
            }

            button:hover {
                background-color: #2980b9;
            }
        }
    }
}
</style>